<template>
    <div>
        <div class="company" @click="showCompany">
            <p>物流公司</p>
            <div class="selected">
                <p>{{select.item}}</p>
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-chevronright"></use>
                </svg>
            </div>
        </div>
        <van-popup v-model="show" position="bottom">
            <div class="select">
                <h1>物流公司</h1>
                <svg class="icon closeIcon" aria-hidden="true" @click="close">
                    <use xlink:href="#icon-close"></use>
                </svg>
                <ul>
                    <li v-for="(item, index) in companyList" @click="selected(item,index)">
                        <p>{{item}}</p>
                        <svg :class="[select.index ===index ? 'active' : 'normal' ]" aria-hidden="true">
                            <use xlink:href="#icon-selected"></use>
                        </svg>
                    </li>
                </ul>
            </div>
        </van-popup>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'selectCompany',
        components: {},
        data() {
            return {
                show: false, // 显示选择公司弹窗
                companyList: [
                    '大田物流',
                    '德邦物流',
                    '飞康达快递',
                    '华宇物流',
                    '华运物流',
                    '汇通快递',
                    '佳吉快运',
                    '民航快递',
                    '全日通快递',
                    '全一快递',
                    '申通快递',
                    '顺丰快递',
                    '天天快递',
                    '希伊艾斯快递',
                    '新邦物流',
                    '星晨急便',
                    '亚风快递',
                    '圆通快递',
                    '韵达快递',
                    '宅急送快递',
                    '长宇物流',
                    '中国邮政EMS',
                    '中铁快运',
                    '中通快递',
                    '中外运空运',
                    '其它'
                ],// 公司列表
                select: {
                    index: '',
                    item: ''
                }, //选择的公司序号
            };
        },
        methods: {
            selected(item, i) {
                // 选择的内容（展示信息）和序号(高亮按钮)
                this.select.index = i;
                this.select.item = item;
                this.$emit('company', this.select.item);
                this.show = false;
            },
            showCompany() {
                this.show = true;
            },
            close() {
                this.show = false;
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .company {
        margin-top smallMargin
        flex-x();
        height vw(40)
        line-height vw(40)
        padding 0 4vw
        background grayF;
        fill: gray9
        .icon {
            width: vw(12)
            height: vw(12)
            fill: gray9
        }
        .selected{
            flex-x(flex-end)
            p{
                margin-right 1vw
                color: gray9
            }
        }
    }
    .select {
        height: 60vh
        position relative
        .closeIcon {
            position absolute
            right: 2vw
            top: -5vw
            width: vw(12)
            height: vw(12)
            fill: gray9
        }
        h1 {
            font-size vw(18)
            text-align center
            margin vw(35) 0 cellPadding
        }
        ul {
            height: 50vh
            padding 0 cellPadding
            overflow-y auto
        }
        li {
            border-bottom 1px solid grayE
            flex-x();
            p {
                font-size vw(16)
                line-height vw(50)
            }
            .active {
                fill: main-color
                width: vw(20)
                height: vw(20)
            }
            .normal {
                width: vw(20)
                height: vw(20)
                fill: grayE
            }
        }
    }
</style>